<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Cheng SJ</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/lightbox.min.css" rel="stylesheet">
    <link href="css/resume.css" rel="stylesheet">
    <link href="css/works.css" rel="stylesheet">

    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/lightbox.min.js"></script>  
    <script src="js/side2.js"></script> 
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Cheng SJ</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="index.html">首页<span class="sr-only"></span></a></li>
            <li><a href="resume.html">个人简历</a></li>
            <li class="active"><a href="#">works</a></li>
          </ul>

        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div class="row">
        <div class="col-sm-9 col-md-9 col-lg-9">
            <div id="main">
                <div id="top"></div>

                <div id="one" class="con text-center">
                    <h2>Favorite</h2>
                    <p class="intro">CG / 水彩</p>
                    <p>PS: 非注明的作品均为<b>原创</b></p>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="item">
                                <a href="" class="image"><img src="image/works/pic07.jpg"></a>
                                <header>
                                    <h4>天台与飞鸟。</h4>
                                </header>
                            </div>
                            <div class="item">
                                <a href="" class="image"><img src="image/works/pic02.jpg"></a>
                                <header>
                                    <h4>临摹（原图来自P站）</h4>
                                </header>
                            </div>
                            <div class="item">
                                <a href="" class="image"><img src="image/works/pic09.jpg"></a>
                                <header>
                                    <h4>阴阳师-红叶</h4>
                                </header>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="item">
                                <a href="" class="image"><img src="image/works/pic08.jpg"></a>
                                <header>
                                    <h4>森。</h4>
                                </header>
                            </div>
                            <div class="item">
                                <a href="" class="image"><img src="image/works/pic04.jpg"></a>
                                <header>
                                    <h4>部落冲突游戏同人</h4>
                                </header>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="item">
                                <a href="" class="image"><img src="image/works/pic05.jpg"></a>
                                <header>
                                    <h4>临摹（原图来自鸡腿子）</h4>
                                </header>
                            </div>
                            <div class="item">
                                <a href="" class="image"><img src="image/works/pic06.jpg"></a>
                                <header>
                                    <h4>崩坏学园2使魔设计大赛投稿</h4>
                                </header>
                            </div>
                            <div class="item">
                                <a href="" class="image"><img src="image/works/pic01.jpg"></a>
                                <header>
                                    <h4>summer vibe</h4>
                                </header>
                            </div>
                        </div>
                    </div>
                    <div class="see"><a href="404.html">see more</a></div>
                    <hr>

                    <p class="intro" id="topic">专题：编程语言拟人</p>
                    <p>脑洞人设，<b>仅娱乐</b>。<b>点击见人设详情</b></p>
                    <div class="row">
                        <a class="example-image-link" href="image/works/C.jpg" data-lightbox="example-set" data-title="C++"><div></div><img class="example-image" src="image/works/xiao1.jpg" alt=""/></a>
                        <a class="example-image-link" href="image/works/java.jpg" data-lightbox="example-set" data-title="java"><img class="example-image" src="image/works/xiao2.jpg" alt="" /></a>
                        <a class="example-image-link" href="image/works/js.jpg" data-lightbox="example-set" data-title="js"><img class="example-image" src="image/works/xiao3.jpg" alt="" /></a>
                        <a class="example-image-link" href="image/works/python.jpg" data-lightbox="example-set" data-title="python"><img class="example-image" src="image/works/xiao4.jpg" alt="" /></a>
                        <a class="example-image-link" href="image/works/css.jpg" data-lightbox="example-set" data-title="css"><img class="example-image" src="image/works/xiao5.jpg" alt="" /></a>
                    </div>
                </div>
                <hr style="margin-top:3em;">

                <div id="two" class="con text-center">
                    <h2>Desigh</h2>
                    <p>业余打杂，才学疏浅，设计比较青涩，还请多多包涵……</p> 
                    <p class="intro">海报（本科期间制作）</p>
                    <ul class="gallery list-inline">
                        <li><a href="#two" class="pic-1"><img src="image/works/hai1.jpg" alt="校园文化衫活动海报"><br>校园文化衫活动海报</a></li>
                        <li><a href="#two" class="pic-2"><img src="image/works/hai0.jpg" alt="女生节活动宣传海报"><br>女生节活动宣传海报</a></li>
                        <li><a href="#two" class="pic-3"><img src="image/works/hai2.jpg" alt="团学联主席竞选海报"><br>团学联主席竞选海报</a></li>
                        <li><a href="#two" class="pic-4"><img src="image/works/hai3.jpg" alt="女生节活动海报"><br>女生节活动海报<br></a></li>
                    </ul>

                    <p class="intro">Loge / 文化衫</p>
                    <div id="myCarousel" class="carousel slide"  style="margin-top:75px;">
                      <!-- 轮播（Carousel）指标 -->
                      <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                      </ol>   
                      <!-- 轮播（Carousel）项目 -->
                      <div class="carousel-inner">
                        <div class="item active">
                          <a href="#two"><img src="image/works/d01.jpg" alt="First slide"></a>
                          <div class="carousel-caption">HPSCIL实验室LOGO</div>
                        </div>
                        <div class="item">
                          <a href="#two"><img src="image/works/d02.jpg" alt="Second slide"></a>
                          <div class="carousel-caption">本科班服（GIS专业3班）</div>
                        </div>
                        <div class="item">
                          <a href="#two"><img src="image/works/d03.jpg" alt="Third slide"></a>
                          <div class="carousel-caption">信工学院毕业文化衫</div>
                        </div>
                      </div>
                      <!-- 轮播（Carousel）导航 -->
                      <a class="icon-prev" href="#myCarousel" 
                         data-slide="prev">&lsaquo;</a>
                      <a class="icon-next" href="#myCarousel" 
                         data-slide="next">&rsaquo;</a>
                    </div>

                </div>
                <hr style="margin-top:3em;">

                <div id="three" class="con text-center">
                    <h2>Photograph</h2>
                    <p class="intro">摄影</p>
                    <p>初级业余爱好者……</p>

                    <div class="row" id="threephoto">
                        <div class="photo col-md-6 col-lg-6 ">
                            <div class="pinf"><strong>荏苒银杏</strong>  photo by ChengSJ</div>
                            <a href="#three" >
                                <img src="image/works/ph01.jpg">
                            </a>
                        </div>
                        <div class="photo col-md-6 col-lg-6 ">
                            <div class="pinf"><strong>暧暧远人村</strong>  photo by ChengSJ</div>
                            <a href="#three">
                                <img src="image/works/ph07.jpg">
                            </a>
                        </div>
                        <div class="photo col-md-6 col-lg-6 ">
                            <div class="pinf"><strong>汉服-闲中好</strong>  这张是别人拍的我……</div>
                            <a href="#three">
                                <img src="image/works/ph03.jpg">
                            </a>
                        </div>
                        <div class="photo col-md-6 col-lg-6 ">
                            <div class="pinf"><strong>十里樱花</strong>  by ChengSJ</div>
                            <a href="#three"> 
                                <img src="image/works/ph04.jpg">
                            </a>
                        </div>
                        <div class="photo col-md-6 col-lg-6 ">
                            <div class="pinf"><strong>北疆朝露</strong>  by ChengSJ</div>
                            <a href="#three">
                                <img src="image/works/ph05.jpg">
                            </a>
                        </div>
                        <div class="photo col-md-6 col-lg-6 ">
                            <div class="pinf"><strong>禾木晨曦</strong>  by ChengSJ</div>
                            <a href="#three">
                                <img src="image/works/ph06.jpg">
                            </a>
                        </div>
                    </div>

                </div>
                <hr style="margin-top:3em;">


                <footer>
                    <div class="copyright">
                        <p>@2017 Cheng Sijing.</p>
                        <p>声明：本页内容均为原创（注明除外），禁转。</p>
                    </div>
                </footer>

            </div>
        </div>

        <div id="panel">
            <div class="col-sm-3 col-md-3 col-lg-3 text-center " id="side">
                <header style="margin-top: 20%">
                    <span class="headimg"><img src="image/touxiang.jpg" class="img-circle img-responsive center-block"></span>
                    <h3><a href="#">Cheng Sijing</a></h3>
                    <p>
                        五月的橙子酱
                        <br>
                        Serenade May
                    </p>
                </header>

                <nav style="margin-top: 10%">
                    <ul class="nav nav-pills nav-stacked">
                        <li><a href="#one" id="one-link" class>Favorite</a></li>
                        <li><a href="#two" id="two-link" class>Desigh</a></li>
                        <li><a href="#three" id="three-link" class>Photograph</a></li>
                    </ul>
                </nav>

                <footer>
                    <ul class="list-inline">
                        <li><a href="http://weibo.com/serenademay" target="_blank" class="fa fa-weibo fa-2x"></a></li>
                        <li><a href="https://github.com/xxtz0522" target="_blank" class="fa fa-github fa-2x"></a></li>
                        <li><a href="https://twitter.com/serenadeMay" target="_blank" class="fa fa-twitter fa-2x"></a></li>
                        <li><a href="http://www.pixiv.net/member.php?id=4170333" target="_blank" class="fa fa-product-hunt fa-2x"></a></li>
                    </ul>
                </footer>
            </div>

            <!-- <div id="paneltoggle">
                <button class="pbutton" data-toggle="offcanvas"><i class="fa fa-bars fa-2x"></i></button>
            </div> -->
            <div class="dropdown" id="paneltoggle">
                <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
                        data-toggle="dropdown">
                    <i class="fa fa-bars fa-2x"></i>
                </button>
                <br>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#one">Favorite</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#two">Desigh</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#three">Photograph</a>
                    </li>
                </ul>
            </div>

        </div>
        
    </div>
</body>
</html>